window.onload = function () {
    hotSaleApi(); //热卖专区数据
    // ajax("get", "helloworld.json", function (res) {
    //   console.log(res);
    // }, true);
    // 搜索框
    var searchInput = document.getElementById("searchInput");
    searchInput.addEventListener("keyup", debounce(getSuggest, 500), false);
    searchInput.addEventListener("blur", hideKeyword, false);
    searchInput.addEventListener("focus", showKeyword, false);

    function showKeyword() {
        if (searchInput.value !== "") {
            // getSuggest();
            document.getElementById("search-suggest").style.display = "block";
        }
    }

    function hideKeyword() {
        document.getElementById("search-suggest").style.display = "none";
    }

    //获取提示列表
    function getSuggest() {
        var InputValue = $("#searchInput").val();
        ajax("get", "/getSuggest?InputValue=" + InputValue, function (res) {
            if (res.code == 0) {
                var suggest_list = document.getElementById("search-suggest"); //下拉提示列表容器元素
                var data = res.data;
                // console.log(data);
                var str = "";
                for (var i = 0; i < data.length; i++) {
                    str += "<li>" + data[i].suggestname + "</li>";
                }
                suggest_list.innerHTML = str;
                // console.log(str)
                showKeyword();
            }
        }, true)
    }
}

//防抖函数
function debounce(fn, delay) {
    var handle;
    return function () {
        clearTimeout(handle);
        handle = setTimeout(function () {
            fn();
        }, delay)
    }
}

//轮播图操作
function bannerOption() {
    var swiper = document.getElementById("swiper"); //获取轮播图包裹层元素
    var swiperItem = swiper.getElementsByClassName("swiper-item"); //获取轮播图列表
    var prev = document.getElementsByClassName("prev")[0]; //获取上一张按钮
    var next = document.getElementsByClassName("next")[0]; //获取下一张按钮
    var indicators = document.getElementsByClassName("indicator"); //获取圆点列表
    var index = 0; //当前轮播图索引，默认第一章
    var timer = null; //定时器

    //设置轮播图的透明度和位移
    for (var i = 0; i < swiperItem.length; i++) {
        if (index == i) {
            swiperItem[i].style.opacity = 1;
        } else {
            swiperItem[i].style.opacity = 0;
        }
        swiperItem[i].style.transform = "translateX(" + (-i * swiperItem[0].offsetWidth) + "px)";
    }

    //给圆点添加点击事件
    for (var k = 0; k < indicators.length; k++) {
        indicators[k].onclick = function () {
            clearInterval(timer);
            var clickIndex = parseInt(this.getAttribute("data-index"));
            index = clickIndex;
            changeImg();
        }
    }

    prev.onclick = function () {
        clearInterval(timer);
        index--;
        changeImg();
    }

    next.onclick = function () {
        clearInterval(timer);
        index++;
        changeImg();
    }
    //鼠标经过停止播放
    swiper.addEventListener("mouseover", function () {
        clearInterval(timer);
    }, false);
    //鼠标移出后自动播放
    swiper.addEventListener("mouseout", function () {
        autoChange();
    }, false)

    //更换图片
    function changeImg() {
        if (index < 0) {
            index = swiperItem.length - 1;
        } else if (index > swiperItem.length - 1) {
            index = 0;
        }
        for (var j = 0; j < swiperItem.length; j++) {
            swiperItem[j].style.opacity = 0;
        }
        swiperItem[index].style.opacity = 1;
        setIndicatorOn();
    }

    //设置圆点激活状态
    function setIndicatorOn() {
        for (var i = 0; i < indicators.length; i++) {
            indicators[i].classList.remove("on");
        }
        indicators[index].classList.add("on");
    }

    autoChange();

    //自动播放
    function autoChange() {
        timer = setInterval(function () {
            index++;
            changeImg();
        }, 3000);
    }

}

function getQueryString(key) {
    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
    var result = window.location.search.substr(1).match(reg);
    return result ? decodeURIComponent(result[2]) : null;
}

/**/

//获取热卖单品列表
function hotSaleApi() {
    // var inputvalues = window.location.href;
    // var inputvalue = inputvalues.split("?inputvalue=")[1];
    // console.log(inputvalue);
    var inputvalue = getQueryString("inputvalue");
    var pageNum =
        console.log(inputvalue);
    $.ajax({
        url: "/search?inputvalue=" + inputvalue + "&pageNum=" + "1",
        type: "post",
        dataType: "json",
        async: false,
        success: function (res) {
            if (res.code === 0) {
                var list = res.data.product;
                var page = res.data.page;
                var totalPage = page.totalPage;
                var current = page.pageNum;
                // console.log(list);
                var hotSaleList = document.getElementById("hotSaleList");
                var str = "";
                if (list.length === 0) {
                    str += `<div>
                            <p style="color: red;font-size: 20px;font-family: Ayuthaya;text-align: center;margin: 20px 0 20px 0">
                            哎呀！没有搜索到您需要的数据！</p>
                        </div>`
                    hotSaleList.innerHTML = str;
                }
                for (var i = 0; i < list.length; i++) {
                    str += '<li class="bs-item item">' +
                        '<a href="/detail.html?id=' + list[i].id + '" target="_blank">' +
                        '<img src="' + list[i].productImg + '" alt="" class="item-img">' +
                        '<p class="title" style="margin-top: 20px">' + list[i].name + '</p>' +
                        '<div class="line-2 clearfix">' +
                        '<span class="comment">评论<em>' + list[i].commentNum + '</em></span>' +
                        '<span class="collect">收藏<em>' + list[i].collectNum + '</em></span>' +
                        '</div>' +
                        '<div class="line-3">' +
                        '<span class="strong">' + list[i].newPrice + '</span>' +
                        '<span class="price-through">￥' + list[i].oldPrice + '</span>' +
                        '<span class="sell">月销' + list[i].saleNum + '笔</span>' +
                        '</div>' +
                        '</a>' +
                        '</li>';
                }
                hotSaleList.innerHTML = str;
                $("#searchInput").val(inputvalue);
                //分页栏控制
                $(".zxf_pagediv").createPage({
                    pageNum: totalPage,
                    current: current,
                    backfun: function (e) {
                        //回调
                        console.log(e.current);
                        $.ajax({
                            url: "/search?inputvalue=" + inputvalue + "&pageNum=" + e.current,
                            type: "post",
                            dataType: "json",
                            async: false,
                            success: function (res) {
                                if (res.code === 0) {
                                    var list = res.data.product;
                                    var page = res.data.page;
                                    var totalPage = page.totalPage;
                                    var current = page.pageNum;
                                    // console.log(list);
                                    var hotSaleList = document.getElementById("hotSaleList");
                                    var str = "";
                                    if (list.length === 0) {
                                        str += `<div>
                            <p style="color: red;font-size: 20px;font-family: Ayuthaya;text-align: center;margin: 20px 0 20px 0">
                            哎呀！没有搜索到您需要的数据！</p>
                        </div>`
                                        hotSaleList.innerHTML = str;
                                    }
                                    for (var i = 0; i < list.length; i++) {
                                        str += '<li class="bs-item item">' +
                                            '<a href="/detail.html?id=' + list[i].id + '">'+
                                            '<img src="' + list[i].productImg + '" alt="" class="item-img">' +
                                            '<p class="title" style="margin-top: 20px">' + list[i].name + '</p>' +
                                            '<div class="line-2 clearfix">' +
                                            '<span class="comment">评论<em>' + list[i].commentNum + '</em></span>' +
                                            '<span class="collect">收藏<em>' + list[i].collectNum + '</em></span>' +
                                            '</div>' +
                                            '<div class="line-3">' +
                                            '<span class="strong">' + list[i].newPrice + '</span>' +
                                            '<span class="price-through">￥' + list[i].oldPrice + '</span>' +
                                            '<span class="sell">月销' + list[i].saleNum + '笔</span>' +
                                            '</div>' +
                                            '</a>' +
                                            '</li>';
                                    }
                                    hotSaleList.innerHTML = str;
                                }
                            }
                        });
                    }
                });
            }
        }
    });
}

function a() {
    interval = setInterval("loadingmore()", 100);//启动计时器，调用overs函数，
}

var i = 0;

function loadingmore() {
    i++;
    if (i > 9) {
        clearInterval(interval);
        interval = null;
        i = 0;
    }
    var liNode = document.createElement("li");
    liNode.setAttribute("class", "like-item item");
    var liContent = `<a href="">
    <img src="img/good.jpg" alt="" class="item-img">
  </a>
  <p class="title">分布式无线路由器</p>
  <div class="line-3">
    <span class="strong">1100</span>
    <span class="sell">月销3000笔</span>
  </div>
  <a href="" class="item-more">发现更多相似的宝贝</a>
  `;
    liNode.innerHTML = liContent;
    document.getElementById("gl").appendChild(liNode);

}

//添加菜单激活状态
function addOn(index) {
    var tool = document.getElementsByClassName("tool")[0];
    var toolItem = tool.getElementsByTagName("a");
    for (var i = 0; i < toolItem.length; i++) {
        toolItem[i].classList.remove("on");
    }
    toolItem[index].classList.add("on");
}

//返回顶部
function goTop() {
    var topTimer = setInterval(function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var iSpeed = Math.floor(-scrollTop / 8);
        if (scrollTop == 0) {
            clearInterval(topTimer);
        }
        document.documentElement.scrollTop = document.body.scrollTop = scrollTop + iSpeed;
    }, 30)

}